<!DOCTYPE html>
<html>
<head>
[#include "/includes/header.html" /]
<link rel="stylesheet" href="${webctx}/resources/css/product.css"/>
</head>
<body>
<div class="content goods-list">
<div class="weui_tab_bd">
	<div id="nav-btn" class="weui_grid_icon">
		<img src="${webctx}/resources/images/nav-ionic.png"/>
		<div class="curtain">
			<ul class="sclassify">
			[#list productCategory as productCategorys]
			<li class="swiper-slide" data-id="${productCategorys.id}" data-name="${productCategorys.name}"><a href="${webctx}/product?categId=${productCategorys.id}">${productCategorys.name}</a></li>
			[/#list]
			</ul>
		</div>
	</div>
	<!-- 搜索框  -->
	<div class="weui-search-bar" id="search_bar">
		<form id="J_form" action="" method="post" class="weui-search-bar__form">
			<div class="weui-search-bar__box">
				<i class="weui_icon_search"></i>
				<input type="search" id="search_input" class="weui-search-bar__input" name="filter" placeholder="搜索" required/>
				<a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
			</div>
			<label for="search_input" class="weui-search-bar__label" id="search_text">
		        <i class="weui-icon-search"></i>
		        <span>搜索喜欢的商品</span>
		    </label>
		    <input type="hidden" name="keyword" value="${keyword}"/>
		</form>
	<!-- <a href="javascript:void(0)" class="weui_search_btn">
		<div id="weui_tab" class="weui_grid_icon" style="display: none;">
	      <img src="${webctx}/resources/images/icon_nav_tab.png" alt="">
	    </div>
	     <div id="weui_cell" class="weui_grid_icon">
      <img src="${webctx}/resources/images/icon_nav_cell.png" alt="">
      </div>
    </a> -->

	</div>
	<!-- /搜索框  -->
	<!-- 筛选条件 -->
	<div id="J_filtrate" class="weui-row weui-no-gutter" style="display: none;">
	    <input type="hidden"  id="categId" value=""/>
	  	<div class="weui-col-25" id="weui-col" data-val="0">默认</div>
	  	<div class="weui-col-25" id="prices">价格<span class="down-ionic pricesUp" data-val="priceAsc"></span></div>
	  	<div class="weui-col-25" id="prices1" style="display: none">价格<span class="down-ionic pricesDown" data-val="priceDesc"></span></div>
	  	<div class="weui-col-25" id="sales">销量<span class="down-ionic salesUp" data-val="salesAsc"></span></div>
	  	<div class="weui-col-25" id="sales1" style="display: none">销量<span class="down-ionic salesDown" data-val="salesDesc"></span></div>
	  	<div class="weui-col-25" id="date">日期<span class="down-ionic dateUp" data-val="dateAsc"></span></div>
	  	<div class="weui-col-25" id="date1" style="display: none">日期<span class="down-ionic dateDown" data-val="dateDesc" ></span></div>
	</div>
	<!-- /筛选条件 -->
	<!-- 商品列表 -->
	<ul id="newgoods-list" class="ex_160426_4" data-source="sku" style="padding-top: 1.2rem"></ul>
	<div id="goods-list" class="goods-wrap"></div>
	<div class="weui-loadmore" style="display: none;">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <div class="weui-loadmore weui-loadmore_line" style="display: none;">
        <span class="weui-loadmore__tips"></span>
    </div>
    <!-- <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
        <span class="weui-loadmore__tips"></span>
    </div> -->
	<!-- /商品列表 -->
</div>
</div>
<!-- orderType = $();
param.orderType = orderType; -->
<!--手机端script需要加载后方-->
[#include "includes/footer.html"/]
<script id="newtmp" type="text/html">
<li>
    <a href="${webctx}/product/detail?id={id}"><img class="o2_gl_img" src="{mainPic}"> 
        <div class="o2_gl_info">
            <div class="o2_gl_t4">{name}</div>
            <div class="o2_gl_t2"><span class="o2_gl_price red">￥<b>{price}</b></span></div>
            <div class="o2_gl_t3 red"></div>
            <div class="o2_gl_button red">立即购买</div>
         </div>
    </a>
</li>
</script>
<script id="newtmpOld" type="text/html">
<li>
	<div class="item">
		<div class="jpic">
			 <a href="${webctx}/product/detail?id={id}" class="floor-pd-img"><img src="{mainPic}"  width="100%"></a>
		</div>
		<div class="jTitle">
             <a href="${webctx}/product/detail?id={id}">{name}</a>
        </div>
       <div class="buy">
		  <div class="jprice">&yen;<span class="jdNum">{price}</span></div>
          <div class="button"><a href="${webctx}/product/detail?id={id}">购 买 &gt;</a></div>
      </div>
	</div>
</li>
</script>
<script id="tmp" type="text/html">
	<div class="goods-item f-cb">
				<a href="${webctx}/product/detail?id={id}"><img class="picture" src="{mainPic}" width="120" height="120"/></a>
				<div class="goods-item-info">
					<div class="title">{name}</div>
					<div class="price">{price}</div>
					<!-- <div class="appraise">
						库存{store}件
					</div> 
					<div class="appraise">
<a class="weui_btn weui_btn_mini weui_btn_primary add-shopping" href="javascript:add2Cart('{id}');">加入购物车</a>
					</div>
					-->
[#if setting.isShowMarketPrice]
					<div class="price" style="color: #787878; font-size: 12px;text-decoration:line-through;">
						{marketPrice}
					</div> 
[/#if]

				</div>
			</div>
</script>
<script type="text/javascript">
var tab_cell=0;
var page = 1;
var params = {};
params.page = page;
params.keyword = '${keyword}';
params.categId = '${categId}';
$(function(){
	//点击筛选
	$("#J_filtrate > div").click(function(){
		var $this = $(this);
		$this.siblings().removeClass("active");
		$this.addClass("active");
		//未完成
	});
	//滚动加载
	var loading = false;  //状态标记
	var complate = false; //数据是否加载完毕
	$(document.body).infinite().on("infinite",function(){
		if(loading) return;
		if(complate) return;
		loading = true;
		page ++;
		//params.formData = $("#J_form").serialize();
		params.page = page;
		//params.keyword='${keyword}';
		submit(params);
		
	});
	//阻止表单提交
	/* $("#J_form").submit(function(){
		$("#goods-list").html("");
		params.formData = $("#J_form").serialize();
		page = 1;
		submit(params);
		return false;
	}); */
	//点击筛选
	/* $("#search_btn").click(function(){
		page = 1;
		$("#J_form").submit(params);
	}); */
	//分类菜单
	$("#nav-btn > img").click(function(){
		$(".curtain").css("display","block");
	});
	$("#nav-btn .curtain").click(function(){
		this.style.display = "none";
	});
	
   $("#weui_cell img").click(function(){
	   tab_cell=1;
	   $("#weui_cell").hide();
	   $("#weui_tab").show();
	   $("#goods-list").empty();
	   $("#newgoods-list").empty();
	   page = 1;
	   params.page = page;
	   submit (params);
	   $("#goods-list").show();
	   $("#newgoods-list").hide();
   });
   
   $("#weui_tab img").click(function(){
	   tab_cell=0;
	   $("#weui_tab").hide();
	   $("#weui_cell").show();
	   $("#goods-list").empty();
	   $("#newgoods-list").empty();
	   page = 1;
	   params.page = page;
	   submit (params);
	   $("#goods-list").hide();
	   $("#newgoods-list").show();
   });
	
	 $("#prices").click(function(){
		 $(this).addClass("active");
		 $(this).hide();
		 $("#prices1").show();
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		  params.orderType =$(".pricesUp").attr("data-val");
		  submit (params);
	 }); 
	 
	 $("#prices1").click(function(){
		 $(this).hide();
		 $("#prices").show();
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		 
		  params.orderType =$(".pricesDown").attr("data-val");
		  submit (params);
	 }); 
	/*  $(".weui-col-25 .pricesUp").click(function(){
		 $(".pricesDown").show();
		 $(".pricesUp").hide();
		 $("#goods-list").empty();
			page = 1;
		 params.page = page;
		  params.orderType =$(this).attr("data-val");
		  submit (params);
	 });  */
	 $("#sales").click(function(){
		 $(this).hide();
		 $("#sales1").show();
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		  params.orderType =$(".salesUp").attr("data-val");
		  submit (params);
	 }); 
	 $("#sales1").click(function(){
		 $(this).hide();
		 $("#sales").show();
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		  params.orderType =$(".salesDown").attr("data-val");
		  submit (params);
	 }); 
	 
	 $("#date").click(function(){
		 $(this).hide();
		 $("#date1").show();
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		  params.orderType =$(".dateUp").attr("data-val");
		  submit (params);
	 }); 
	 $("#date1").click(function(){
		 $(this).hide();
		 $("#date").show();
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		  params.orderType =$(".dateDown").attr("data-val");
		  submit (params);
	 }); 
	
	 $("li.swiper-slide").click(function(){
		 $("#weui-col").empty();
		 $("#weui-col").html($(this).attr("data-name"));
		 $("#goods-list").empty();
		 $("#newgoods-list").empty();
			page = 1;
		 params.page = page;
		  params.categId =$(this).attr("data-id");
		  submit (params);
	  });

	function submit (arr){
		$("div.weui-loadmore").show();
		$.ajax({
			type: "post",
			url: "${webctx}/product/list",
			data: arr,
			async: true,
			success: function(data){
				loading = false;
				$("div.weui-loadmore").hide();
				if(data.code != 200){
					$.toast("加载数据失败，请重新拉取");
					return;
				}
				
				if(data.data.length<=0){
					complate = true;
					$(".weui-loadmore_line").show();
					$(".weui-loadmore__tips").html("已经到底了");
					//$(".weui-infinite-scroll").show();
				}else{
					for( var i = 0 ; i < data.data.length ; i ++ ){
						var html = formatTemplate(data.data[i], $("#newtmp").html());
						$("#newgoods-list").append(html);
					}					
				}
			},
			error: function(){
				$("div.weui-loadmore").hide();
				alert("网络异常,请联系管理员!");
			}
		});
	}
	submit(params);
});


function add2Cart(productId){
	$.post("${webctx}/cart/add", {productId: productId}, function(resp){
		if(resp.code != 200){
			$.toast(resp.msg);
		}else{
			$.toast("加入购物车成功");
		}
	});
}
</script>
</body>
</html>